<script setup>
//引入依赖
import Map from 'ol/Map';
import VectorLayer from 'ol/layer/Vector';
import View from 'ol/View';
import { ref ,onMounted} from "vue";
import { fromLonLat } from "ol/proj";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import TopoJSON from "ol/format/TopoJSON";
import axios from "axios";
import EsriJSON from "ol/format/EsriJSON";

const map = ref(null);

const image = new CircleStyle({
  radius: 5,
  fill: null,
  stroke: new Stroke({
    color: 'blue',
    width: 1,
  }),
})

const styles = {
  'Point': new Style({
    image: image,
  }),
  'LineString': new Style({
    stroke: new Stroke({
      color: 'green',
      width: 1,
    }),
  }),
  'MultiLineString': new Style({
    stroke: new Stroke({
      color: 'green',
      width: 1,
    }),
  }),
  'MultiPoint': new Style({
    image: image,
  }),
  'MultiPolygon': new Style({
    stroke: new Stroke({
      color: 'yellow',
      width: 1,
    }),
    fill: new Fill({
      color: 'rgba(255, 255, 0, 0.1)',
    }),
  }),
  'Polygon': new Style({
    stroke: new Stroke({
      color: 'blue',
      lineDash: [4],
      width: 3,
    }),
    fill: new Fill({
      color: 'rgba(0, 0, 255, 0.1)',
    }),
  }),
  'GeometryCollection': new Style({
    stroke: new Stroke({
      color: 'magenta',
      width: 2,
    }),
    fill: new Fill({
      color: 'magenta',
    }),
    image: new CircleStyle({
      radius: 10,
      fill: null,
      stroke: new Stroke({
        color: 'magenta',
      }),
    }),
  }),
  'Circle': new Style({
    stroke: new Stroke({
      color: 'red',
      width: 2,
    }),
    fill: new Fill({
      color: 'rgba(255,0,0,0.2)',
    }),
  }),
};

const stylesFunction = feature => {
  return styles[feature.getGeometry().getType()];
}

const initMap = async () => {
  const response = await axios.get('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json');
  const esriJson = new EsriJSON();
  const arr = response.data;
  const vectorSource = new VectorSource();
  for (const feature of arr){
    const data = esriJson.readFeature(feature);
    vectorSource.addFeature(data);
  }
  const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: stylesFunction,
  })

  map.value = new Map({
    target:'map',
    layers: [
      vectorLayer,
    ],
    view: new View({
      center: [ 116.38916015624999, 39.926588421909436],
      projection: "EPSG:4326", //指定投影
      zoom: 4,
    }),
  })
}

onMounted(initMap)
</script>

<template>
  <!--地图挂载dom-->
  <div id="map">
  </div>
</template>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>